<template>
  <el-container>
    <el-aside width="10%"></el-aside>
    <el-main>
      <el-row>图书名称：《{{ picbook_name }}》</el-row>
      <el-divider></el-divider>
      <el-row
        :span="24"
        v-for="(item, index) in pic_name"
        :key="index"
        class="detail"
      >
        <el-col :span="2"
          >名称：{{ item }}<br /><el-button
            type="text"
            @click="delPic(picbook_name, pic_location[index])"
            >删除</el-button
          ></el-col
        >
        <el-col :span="22"
          ><el-image
            :src="pic_location[index]"
            :fit="fit"
            style="width: 100%; height: 300px"
            :preview-src-list="larger"
            @click="setLarger(pic_location[index])"
          ></el-image
        ></el-col>
        <el-divider></el-divider>
      </el-row>
    </el-main>
    <el-aside width="10%"></el-aside>
  </el-container>
</template>

<script>
import { request } from "@/network/request";
import { ElLoading, ElMessage } from "element-plus";

export default {
  name: "PicDetail",
  data() {
    return {
      fit: "contain",
      picbook_name: "",
      pic_name: null,
      pic_location: null,
      larger: []
    };
  },
  methods: {
    delPic(name, src) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let loadingInstance = ElLoading.service({
            fullscreen: true,
            text: "文件删除中，请稍后..."
          });
          request({
            method: "post",
            url: "/api/file/delPic",
            params: {
              src: src
            }
          })
            .then(res => {
              if (res.data.code === "200") {
                ElMessage.success("删除成功！");
                this.pic_name.pop(name);
                this.pic_location.pop(src);
                loadingInstance.close();
                this.$router.go(-1);
              } else if (res.data.code === "400") {
                ElMessage.error("删除失败！");
                loadingInstance.close();
              }
            })
            // eslint-disable-next-line no-unused-vars
            .catch(err => {
              ElMessage.error("删除失败！");
              loadingInstance.close();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      // let loadingInstance = ElLoading.service({
      //   fullscreen: true,
      //   text: "文件删除中，请稍后..."
      // });
      // // console.log(src);
      // request({
      //   method: "post",
      //   url: "/api/file/delPic",
      //   params: {
      //     src: src
      //   }
      // })
      //   .then(res => {
      //     if (res.data.code === "200") {
      //       ElMessage.success("删除成功！");
      //       this.pic_name.pop(name);
      //       this.pic_location.pop(src);
      //       loadingInstance.close();
      //       this.$router.go(-1);
      //     } else if (res.data.code === "400") {
      //       ElMessage.error("删除失败！");
      //       loadingInstance.close();
      //     }
      //   })
      //   // eslint-disable-next-line no-unused-vars
      //   .catch(err => {
      //     ElMessage.error("删除失败！");
      //     loadingInstance.close();
      //   });
    },
    setLarger(item) {
      this.larger = [];
      this.larger.push(item);
    }
  },
  created() {
    this.picbook_name = this.$route.params.picbook_name;
    this.pic_name = this.$route.params.pic_name;
    this.pic_location = this.$route.params.pic_location;
  },
  mounted() {}
};
</script>

<style scoped>
.detail {
  height: 400px;
  padding-top: 20px;
  margin-top: 20px;
}
</style>
